<template>
  <section class="water-order-list-main order-list-main base-main">
    <van-tabs v-model="active" animated>
      <van-tab title="配送中">
        <div class="order-tab-box">
          <WaterOrder
            :orderData="orderData"
            status="1"
            @send-order-id="getOrderOId"
            @operation-order="operationOrder"
          ></WaterOrder>
        </div>
      </van-tab>
      <van-tab title="已完成">
        <div class="order-tab-box">
          <WaterOrder
            :orderData="orderData"
            status="2"
            @send-order-id="getOrderOId"
            @operation-order="operationOrder"
          ></WaterOrder>
        </div>
      </van-tab>
    </van-tabs>
  </section>
</template>

<script type="text/ecmascript-6">
  import WaterOrder from '../../components/WaterOrder.vue'

  export default {
    components:{
      WaterOrder
    },
    data() {
      return {
        active:this.$route.params.active || 0,
        orderData:[
          {
            orderNum:'20183546543112',
            status:1,//待付款
            goodList:[
              {
                goodName:'商品名称11',
                goodModel:'商品规格11',
                price:'80.00',
                goodNum:2,
                imgPath:'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=130623978,3345737307&fm=85&app=63&f=JPG?w=121&h=75&s=7B84F70E594ECCCE50FDA96E0300607B'
              },
              {
                goodName:'商品名称22',
                goodModel:'商品规格22',
                price:'80.00',
                goodNum:2,
                imgPath:'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=130623978,3345737307&fm=85&app=63&f=JPG?w=121&h=75&s=7B84F70E594ECCCE50FDA96E0300607B'
              },
            ],
            totalPrice:320,
            totalGoodNum:4,
          },
          {
            orderNum:'20183546543112',
            status:2,//待付款
            goodList:[
              {
                goodName:'商品名称11',
                goodModel:'商品规格11',
                price:'80.00',
                goodNum:2,
                imgPath:'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=130623978,3345737307&fm=85&app=63&f=JPG?w=121&h=75&s=7B84F70E594ECCCE50FDA96E0300607B'
              },
              {
                goodName:'商品名称22',
                goodModel:'商品规格22',
                price:'80.00',
                goodNum:2,
                imgPath:'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=130623978,3345737307&fm=85&app=63&f=JPG?w=121&h=75&s=7B84F70E594ECCCE50FDA96E0300607B'
              },
            ],
            totalPrice:320,
            totalGoodNum:4,
          }
        ],
      }
    },
    created(){

    },
    methods: {
      //跳转到订单详情页
      getOrderOId(obj){
        this.$router.push({
          path:'/index/web/orderDetail',
          query:{id:obj.id,afterSale:obj.afterSale,unpaid:obj.unpaid}
        })
      },
      //操作订单
      operationOrder(obj){
        switch (obj.type){
          case 1:
            this.$dialog
              .confirm({
                title: "客服电话",
                message: "020-2204-9853",
                confirmButtonText: "呼叫",
                cancelButtonText: "确定",
              })
              .then(() => {
                let tel = "02022049853";
                let a = document.createElement("a");
                a.href = "tel:" + tel;
                a.click();
              });
            break;
          case 2:
            this.$dialog.confirm({
              title: '',
              message: '确认收到货物？'
            }).then(() => {
              console.log('确认收到货物');
              // on confirm
            }).catch(() => {
              // on cancel
            });
            break;
        }
      },
    },
  }
</script>

<style lang="scss">
  @import '../../assets/css/orderList';
</style>
